import React, {Component, PropTypes} from 'react'
import ReactHighcharts from 'react-highcharts'
import {pieConfig} from './ConfigGraph'
import '../../../lib/styles/app.less'

export default class HighChartsPipeComponent extends Component {
  constructor(props) {
    super(props)
  }

  afterRender = (chart)=> {
    const {isLoading, needDateState}=this.props
    if (isLoading) {

      if (needDateState) {
        chart.showNoData('请选择日期')
      } else {
        chart.showNoData(" ")
        chart.showLoading()
      }
    } else {
      chart.hideLoading()
      chart.showNoData("无数据")
    }

  }

  shouldComponentUpdate(nextprops) {
    return this.props.series !== nextprops.series || this.props.isLoading !== nextprops.isLoading || this.props.needDateState !== nextprops.needDateState
  }

  render() {
    const pieConfigCustom = {
      chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: true,
        type: 'pie',
        animation: {
          duration: 1500,
          easing: 'easeOutBounce'
        }
      },
      title: {
        text: this.props.title
      },
      credits: {
        enabled: false
      },
      loading: {
        labelStyle: {
          color: 'white'
        },
        style: {
          backgroundColor: 'gray'
        }
      },
      tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}</b>'
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: true,
            useHTML: true,
            formatter: function () {
              return "<p style='width: 70px; display:inline-block; white-space:pre-wrap;font-size:11px;color:#606060'>" + this.point.name + ": " +
                this.percentage.toFixed(2) + " </p>";
            }
          }
          , events: {
            click: function (e) {
              var t = this.data[event.point.x].name;
            }
          }
        }
      },
      series: [{
        name: '数据',
        colorByPoint: true,
        data: this.props.series
      }],
    }
    return (
      <div className="chart-wrap">

        <div className="chart-nav">
          {this.props.nextReport !== null &&
          <div className="chart-next"  onClick={e=>this.props.handleNextReport(this.props.nextReport)}>＞</div>
          }
          {  this.props.prevReport!==null&&
          <div className="chart-pre" onClick={e=>this.props.handlePreReport(this.props.prevReport)}>＜</div>
            }
        </div>

        <ReactHighcharts className='chart-border' config={pieConfigCustom} callback={this.afterRender}>

        </ReactHighcharts>
      </div>
    )

  }

}
